/* 颜色定义 */
@base: #d3152e;
@lightgray: #929292;
@gray: #666;
@text-color: #333;
@bg: #f3f4f8;
@border-color: #e0e0e0;
@weixin: #00c800;
/* mixins */
.multi-ellipsis(@line: 2) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;

  text-overflow: ellipsis;

  -webkit-line-clamp: @line;
}
.wh(@width, @height: @width) {
  width: @width;
  height: @height;
}
.lh(@height, @lineHeight: @height) {
  height: @height;

  line-height: @lineHeight;
}
.whl(@width, @height: @width, @lineHeight: @height) {
  width: @width;

  .lh(@height, @lineHeight);
}
.round(@r: 50%) {
  border-radius: @r;
}
.abs-center() {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}
.abs-middle() {
  position: absolute;
  top: 50%;

  transform: translateY(-50%);
}

.border(@color,@r: 0){
  position: relative;
  &:before{
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid @color;
    transform-origin: 0 0;
    transform: scale(.5, .5);
    box-sizing: border-box;
    left: 0;
    top: 0;
    border-radius: 2*@r;
  }
}
.border-top(@color){
  position: relative;
  &:before{
    content: '';
    position: absolute;
    width: 200%;
    height: 1px;
    background: @color;
    transform-origin: 0 0;
    transform: scale(.5, .5);
    box-sizing: border-box;
    left: 0;
    top: 0;
  }
}
.border-bottom(@color){
  position: relative;
  &:before{
    content: '';
    position: absolute;
    width: 200%;
    height: 1px;
    background: @color;
    transform-origin: 0 0;
    transform: scale(.5, .5);
    box-sizing: border-box;
    left: 0;
    bottom: 0;
  }
}
.border-left(@color){
  position: relative;
  &:before{
    content: '';
    position: absolute;
    width: 1px;
    height: 200%;
    background: @color;
    transform-origin: 0 0;
    transform: scale(.5, .5);
    box-sizing: border-box;
    left: 0;
    top: 0;
  }
}